<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <div class="app">
        <input type="text" v-model="msg">
        <span>{{msg}}</span>
        <br>
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        <span>{{result}}</span>
        <br>
        <ul>
            <li v-for="item in list">
                {{item.name}} - <input type="text" v-model="item.name">
            </li>
        </ul>
        <input type="text" v-model="list">
        <br>
        <input type="text" v-model="str"> <span>{{str}}</span>
        <br>
        <input type="text" v-model="str2"> <span class="txt">{{str2}}</span>
        <br>
        <input type="text" v-model="obj.child.name"> <span class="abc">{{obj.child.name}}</span>
    </div>
</body>
<script src="../vue.global.js"></script>
<script>
    Vue.createApp({
        data(){
            return {
                msg: "hello",
                firstName:"",
                lastName:"",
                result:"",
                list:[{
                    name:"张三"
                },{
                    name:"李四"
                }],
                str:"hello",
                str2:"world",
                obj:{
                    name:"obj",
                    child:{
                        name:"child"
                    }
                }
            }
        },
        watch:{
            msg(newVal, oldVal){
                console.log("新值", newVal)
                console.log("老值", oldVal)
            },
            firstName(newVal){
                this.result = newVal + this.lastName;
            },
            lastName(newVal){
                this.result = this.firstName + newVal;
            },
            list:{
                handler(newVal, oldVal){
                    console.log("新值", newVal[0])
                    console.log("老值", oldVal[0])
                    console.log(newVal === oldVal)
                },
                deep: true
            },
            str:{
                handler(newVal, oldVal){
                    console.log("新值", newVal)
                    console.log("老值", oldVal)
                },
                immediate: true
            },
            str2:{
                handler(newVal, oldVal){
                    console.log("新值", newVal)
                    console.log("老值", oldVal)
                    console.log(document.querySelector(".txt").innerHTML);
                },
                flush: "post"
            },
            obj:{
                handler(newVal, oldVal){
                    console.log("新值", newVal);
                    console.log("老值", oldVal);
                },
                deep: true,
                immediate: true,
                flush: "post"
            }
        }
    }).mount(".app");
</script>
</html>